<template>
  <div class="setup_wrap">
    <div class="setup_header">
      <span class="font">长按后上下拖动进行排序</span> 
    </div>
    <div class="set_content"  >
      <!-- 加判断是否是排过序的 拍过序的循环endList数据 -->
      <!-- 默认初始界面 -->
      <draggable v-model="list" @update="datadragEnd" :options="options">                                                                                                  
      <transition-group>
      <div v-for="item in list" :key="item.id">
        <van-cell center class="cell">
          <span class="font" >
            <i v-for="(icon,index) in icons" :key="index"><img v-if="item.id == index+1"  :src="icons[index].icon" alt="" style="width:14px; height:14px; margin-right:10px"></i>
            {{item.title}}</span>
          <template #right-icon>
            <van-switch v-model="item.switch"  active-color="#07c160" inactive-color="#fff" size="14" @change="Switch(item.switch,item.id)" />
          </template> 
        </van-cell>
        <van-divider :style="{ color: '#1989fa', borderColor: '#E6E6E6', padding: '0 16px',margin:0 }"/>
      </div>
      </transition-group>
      </draggable>
    </div>
    <div style="margin:16px 10px"> 
      <span style="height:11.5px;font-size:12px;font-family:PingFang SC;font-weight:400; color:rgba(128,128,128,1);text-align:left; margin: 8px 0px 0 13px;"
      >打开/关闭功能区入口，关闭后仅隐藏该功能，不会清空数据</span>
    </div>
    <!-- 时间 -->  
    <div class="time" style="margin: 10px" >
      <p style="margin:5px"><img src="@/static/workBench/setup/shijian@2x.png" alt="" style="margin:5px 10px 0 13px;width:14px"> <span >时间</span></p>
      <van-collapse v-model="activeNames" accordion  style="box-shadow:0px 4.5px 2px 0px rgba(0,42,105,0.05)">
        <van-collapse-item title="请选择时间" name="1" :value="time" >
          <van-radio-group v-model="radio" @change="newOld(radio)">
            <van-cell-group>
              <van-cell title="当月" clickable @click="radio = '0'">
                <template #right-icon  >
                  <van-radio name="0"  />
                </template>
              </van-cell>
              <van-cell title="上个月" clickable @click="radio = '1'">
                <template #right-icon >
                  <van-radio name="1" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-collapse-item>
      </van-collapse>
      <p  style="display: block;margin-left:16px;font-size:12px">注：<span>工作台显示的统计信息根据时间显示</span></p>
    </div>  
    <!-- 目标分数 -->
    <div style="text-align: left;margin:10px">
      <p style="margin:5px"><img src="@/static/workBench/setup/mubiaofenshu@2x.png" alt="" style="margin:0 10px 0 13px;width:14px"><span> 目标分数</span></p>
      <div style="box-shadow:0px 4.5px 2px 0px rgba(0,42,105,0.05);"> 
        <van-field v-model="value"  size="14" placeholder="请输入目标分数" type="digit" style="border-radius:5px;" @change="Target"/>
      </div>
    </div> 
    <!-- 自动审核 -->
    <div class="auto_audit" style="margin:20px 10px;box-shadow:0px 4.5px 2px 0px rgba(0,42,105,0.05);"  v-if="is_auto_show == 1">
      <van-cell center  class="cell">
        <span class="font"><i><img src="@/static/workBench/setup/shenheshezhi@2x.png" alt="" style="width:14px; height:14px; margin-right:10px"></i>开启自动审核</span>
        <template #right-icon>
          <van-switch v-model="checked" active-color="#07c160" inactive-color="#fff" size="14" @change="show_check(checked)"/>
        </template>
      </van-cell>
      <van-row v-show="show">
        <van-field v-model="auto_hour" type="digit" label="自动审核时长(终审人)"  @change="Submission(auto_hour)"/>
      </van-row>
    </div>
  </div>
</template>
<script type="text/javascript">
import{ Icon,Switch,Divider,Cell,Field,CellGroup,Checkbox, CheckboxGroup,Collapse, CollapseItem,row,Dialog,RadioGroup, Radio,NumberKeyboard }from "vant";
import draggable from 'vuedraggable';
export default {
  name:"setup",
  data(){
    return{
      list:[],
      newList:[],
      checked:false,  
      show:false,
      isAutomatic:0,
      activeNames: ['1'],
      result: [],
      radio:'0',
      value:'',
      is_auto:'',
      // isShow:'',
      auto_hour:'',
      is_auto_show:'',
      time: '',
      icons:[
        { 
          icon:require('@/static/workBench/setup/jifen_icon@2x.png')
        },
         {
         icon:require('@/static/workBench/setup/jixiao@2x.png') 
        },
         {
         icon:require('@/static/workBench/setup/zhibiao@2x.png')
        },
         {
          icon:require('@/static/workBench/setup/shenpi@2x.png')
        },
         {
           icon:require('@/static/workBench/setup/jifenshenqing@2x.png')
        },
         {
          icon:require('@/static/workBench/setup/jifenrenwu@2x.png'),
        },
         {
         icon:require('@/static/workBench/setup/paiming@2x.png'),
        },
      ],
      options: {
        delayOnTouchOnly: true,  //开启触摸延时
        direction: 'vertical',   //拖动方向
        delay: 500,              //延时时长
        touchStartThreshold: 3,  //防止某些手机过于敏感(3~5 效果最好)
        chosenClass: 'chosen',   //选中之后拖拽项添加的class名(用于选中时候添加样式)
      },
    }
  },
  created(){
    dd.biz.navigation.setTitle({
        title:"工作台设置页"//控制标题文本，空字符串表示显示默认文本
      });
  },
  mounted(){
    this.workBench_stting()
    let endList = localStorage.getItem("endlist")
      endList = JSON.parse(endList)
      if(!endList){
        this.workBench_stting()
      }else{
        let endList = localStorage.getItem("endlist");
        endList = JSON.parse(endList)
        this.list = endList
      }
  },
  methods:{
    //本地保存列表顺序
  datadragEnd (evt) {
    evt.preventDefault();
    let endList = this.list
    localStorage.setItem('endlist', JSON.stringify(endList))  
  },
    //调用列表接口
  async workBench_stting(){
    let userId = localStorage.getItem("userId");
    let corpId = localStorage.getItem("custid");
    const res = await this.$http.get(
      `yuepoints/tableSetting?corpId=${corpId}&userId=${userId}`
    )
    this.list = res.data.data.tableSetting
    this.is_auto = res.data.data.is_auto
    this.auto_hour = res.data.data.auto_hour
    this.is_auto_show = res.data.data.is_auto_show
    this.radio = res.data.data.section
    if(this.radio == 0){
      this.time = '当月'
    }else{
      this.time ='上个月'
    }
    if(this.is_auto == 1){
      localStorage.setItem('is_auto', JSON.stringify(this.is_auto))
    }else{
      localStorage.setItem('is_auto', JSON.stringify(this.is_auto))
    }
    let isauto = localStorage.getItem("is_auto");
    if(this.is_auto == isauto && this.is_auto==1){
      this.checked = true
      this.show=true
    }else{
      this.checked = false
    }
    const newList = this.list.filter(item =>{return item.is_show === true })
    this.list = newList
  }, 
   //开启自动审核
  show_check(checked){
    if(checked == true){
      this.show=true
      this.isAutomatic=1
      this.Submission(this.auto_hour)
      
    }else{
      this.show=false;
      this.isAutomatic = 0
      this.Submission(this.auto_hour)
    }
  }, 
  //自动审核
  async Submission(auto_hour){
    let corpId = localStorage.getItem("custid");
    let userId = localStorage.getItem('userId')
    const num=this.isAutomatic;
    const i= auto_hour;
    if(i>=0&&i<=24){
        const res = await this.$http.get(`yuepoints/setAutomaticAudit?corpId=${corpId}&userId=${userId}&isAutomatic=${num}&Duration=${i}`)
        if(res.data.errcode!='0000'){
            this.$toast(res.data.errmsg)
        }  
    }else{
        this.$toast('时长在1-24')
    }
  },
  //开关
  Switch(e,Id){
    if(e === false){
        let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
        const res =  this.$http.get(`yuepoints/updateTableSetting?corpId=${corpId}&userId=${userId}&id=${Id}&isOpne=2`)
        let endList = this.list
        localStorage.setItem('endlist', JSON.stringify(endList))
      }else{
        let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
        const res =  this.$http.get(`yuepoints/updateTableSetting?corpId=${corpId}&userId=${userId}&id=${Id}&isOpne=1`)
        let endList = this.list
        localStorage.setItem('endlist', JSON.stringify(endList))
      }  
  },
  //目标分数
  Target(){
    localStorage.setItem('num', JSON.stringify(this.value)) 
  },
  newOld(radio){
    if(radio == 0){
      this.time = '当月'
      let corpId = localStorage.getItem("custid");
      let userId = localStorage.getItem('userId')
      const res =  this.$http.get(`yuepoints/userSet?corpId=${corpId}&userId=${userId}&dateType=${radio}`)
    }else{
      this.time = '上个月'
      let corpId = localStorage.getItem("custid");
      let userId = localStorage.getItem('userId')
      const res =  this.$http.get(`yuepoints/userSet?corpId=${corpId}&userId=${userId}&dateType=${radio}`)
    }
  } 
  },
  components:{  
    [Icon.name]:Icon,
    [Switch.name]:Switch,
    [Divider.name]:Divider,
    [Cell.name]:Cell,
    [Field.name]:Field,
    [CellGroup.name]:CellGroup,
    [Checkbox.name]:Checkbox ,
    [CheckboxGroup.name]:CheckboxGroup,
    [Collapse.name]:Collapse,
    [CollapseItem.name]: CollapseItem,
    [row.name]:row,
    [Dialog.name]:Dialog,
    [RadioGroup.name]:RadioGroup, 
    [Radio.name]:Radio,
    [NumberKeyboard.name]:NumberKeyboard,
    draggable,
  }
}
</script>
<style lang="less" scoped>

*{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */ }
.setup_wrap{
  height: 100vh;
  background:rgba(248,248,250,1);
  font-size: 14px;
  text-align: left;
  margin-bottom: 50px;
  .setup_header{
    margin: 10px 0;
    height: 25px;
    line-height: 25px;
    background: #ECF9FF;
    align-items: center;
    .font{
      height:10.5px;
      font-size:11px;
      font-family:PingFang SC;
      font-weight:400;
      color:rgba(36,36,36,1);
      display: block;
      margin: 7px 0px 7px 23px;
    }
  }
  .set_content{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    margin:10px;
    box-shadow:0px 4.5px 2px 0px rgba(0,42,105,0.05);
    border-radius:5px;
    .cell{
      height:31px
    }
  }
  .diffcell{
    height:31px;
    background:rgba(255,255,255,1);
    box-shadow:0px 4.5px 2px 0px rgba(0,42,105,0.05);
    border-radius:5px;
  }
  /deep/.van-collapse-item{
    text-align: left;
    .van-collapse-item__wrapper{
      /deep/.van-collapse-item__content{
        padding: 0;
      }
    }
  }
  .auto_audit{
    /deep/.van-field__label{
      width: auto;
    }
    /deep/ .van-field__value{
        margin-left: 45vw;
    }
  }
}
</style>